<template>
  <!-- 浮动工具栏（仅单个元素选中时显示） -->
  <div class="floating-toolbar" v-if="selectedElement">
    <component 
      :is="getToolbarComponent()"
      :element="selectedElement"
      @update-element="handleUpdateElement"
    />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useElementStore } from '@/store'
import { ElementType } from '@/types'
import ShapeToolbar from './ShapeToolbar.vue'
import ImageToolbar from './ImageToolbar.vue'
import TextToolbar from './TextToolbar.vue'

const elementStore = useElementStore()

// 获取当前选中的单个元素
const selectedElement = computed(() => {
  if (elementStore.selectedElementIds.length !== 1) return null
  return elementStore.elements.find(el => el.id === elementStore.selectedElementIds[0])
})

// 根据元素类型选择对应的工具栏组件
const getToolbarComponent = () => {
  switch (selectedElement.value?.type) {
    case ElementType.SHAPE:
      return ShapeToolbar
    case ElementType.IMAGE:
      return ImageToolbar
    case ElementType.TEXT:
      return TextToolbar
    default:
      return null
  }
}

// 接收工具栏的属性更新事件，同步到元素
const handleUpdateElement = (id: string, payload: Partial<any>) => {
  elementStore.updateElement(id, payload)
}
</script>

<style scoped>
.floating-toolbar {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 8px;
  z-index: 100;
  /* 后续根据选中元素位置动态调整top/left */
}
</style>